<template>
  <div class="card-box">
    <div class="home-title">项目进度</div>
    <div class="progress-list">
      <template v-if="listData.length > 0">
        <div class="item" v-for="(item, index) in listData" :key="index">
          <div class="row-1">
            <span>{{ item.project_name }}</span>
            <span>{{ item.sub_scence }}</span>
          </div>
          <div class="row-2">
            <ProgressBar
              :maxValue="100"
              :value="item.progressBar"
              :width="480"
              :height="6"
              :borderRadius="'3px'"
              :maxBg="'rgb(236,236,236)'"
              :valueBg="` linear-gradient(
                to right,
                rgba(0, 136, 246, 1),
                rgba(55, 188, 240, 1)
              )`"
            ></ProgressBar>
          </div>
        </div>
      </template>
      <template v-if="listData.length == 0">
        <el-empty description="暂无进度" :image-size="80"></el-empty>
      </template>
    </div>
  </div>
</template>

<script>
import ProgressBar from "@/components/Common/ProgressBar.vue";
export default {
  components: { ProgressBar },
  props: {
    listData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      info: null,
    };
  },
  methods: {
    initData() {
      this.listData.map((item) => {
        let progress = 0;
        switch (item.sub_scence) {
          case "前期协同":
            progress = 25;
            break;
          case "建设实施":
            progress = 50;
            break;
          case "建成投产":
            progress = 75;
            break;
          case "后评价":
            progress = 100;
            break;
          default:
            progress = 0;
            break;
        }

        item.progressBar = progress;
        return item;
      });
    },
  },
  watch: {
    listData(newVal) {
      if (newVal) {
        this.initData();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./home.scss";
.progress-list {
  height: calc(100% - 30px);
  overflow-y: auto;
}
.item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.row-1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  > span {
    font-size: 13px;
    text-align: left;
    &:nth-child(1) {
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:nth-child(2) {
      flex: 1;
      text-align: center;
      font-weight: 600;
      color: $colorYellow;
      letter-spacing: 1px;
    }
  }
}
.row-2 {
  margin-top: 10px;
}
</style>